{% extends 'home.html' %}
{% block content_main %}
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title text-center">作者展示页面</h3>
        </div>
        <div class="panel-body">
            <!-- Default panel contents -->
            <div><a href="{% url 'author_add' %}" type="button" class="btn btn-success">添加作者</a></div>
            <!-- Table -->
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>手机号</th>
                    <th>邮箱</th>
                    <th>地址</th>
                    <th>编辑</th>
                </tr>
                </thead>
                <tbody>
                {% for i in author_date %}
                    <tr class="active">
                        <th>{{ forloop.counter }}</th>
                        <td>{{ i.name }}</td>
                        <td>{{ i.age }}</td>
                        <td>{{ i.get_gender_display }}</td>
                        <td>{{ i.author_detail.phone }}</td>
                        <td>{{ i.author_detail.email }}</td>
                        <td>{{ i.author_detail.addr }}</td>
                        <td>
                            <form method="post" action="">
                                <input type="hidden" name="author_id" value="{{ i.id }}">
                                <button type="button" data-toggle="modal" data-target="#myModal{{ i.id }}"
                                        class="btn btn-success">修改
                                </button>
                                <!-- 模态框 -->
                                <div id="myModal{{ i.id }}" class="modal fade" tabindex="-1" role="dialog">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">输入需要修改的内容</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label for="Aname">姓 名</label>
                                                    <input type="text" id="Aname" name="name"
                                                           value="{{ i.name }}">
                                                </div>
                                                <div class="form-group">
                                                    <label for="age">年 龄</label>
                                                    <input type="text" id="age" name="age"
                                                           value="{{ i.age }}">
                                                </div>
                                                <div class="form-group">
                                                    <label for="gender">性 别</label>
                                                    <input type="text" id="gender" name="gender"
                                                           value="{{ i.get_gender_display }}" placeholder="男|女|其他(保密)">
                                                </div>
                                                <div class="form-group">
                                                    <label for="phone">手机号</label>
                                                    <input type="text" id="phone" name="phone"
                                                           value="{{ i.author_detail.phone }}">
                                                </div>
                                                <div class="form-group">
                                                    <label for="Aemail">邮 箱</label>
                                                    <input type="text" id="Aemail" name="email"
                                                           value="{{ i.author_detail.email }}">
                                                </div>
                                                <div class="form-group">
                                                    <label for="Aaddr">地 址</label>
                                                    <input type="text" id="Aaddr" name="addr"
                                                           value="{{ i.author_detail.addr }}">
                                                </div>

                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                                </button>
                                                <button type="submit" name="action" value="update"
                                                        class="btn btn-primary">确定
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </form>
                            <button class="btn btn-danger b44" value="{{ i.pk }}">删除
                            </button>
                            <script>
                                $(".b44").click(function () {
                                    let id = $(this).val();
                                    swal({
                                        title: "确定要删除吗？",
                                        icon: "warning",
                                        buttons: ['取消', '确定'],
                                        dangerMode: true,
                                    })
                                        .then((willDelete) => {
                                            if (willDelete) {
                                                $.ajax({
                                                    url: "",
                                                    method: "POST",
                                                    data: {
                                                        'id': id,
                                                        'action': 'del'
                                                    },
                                                    success: function (data) {
                                                        swal("这条数据已删除", {
                                                            icon: "success",
                                                        }).then(() => {
                                                            location.reload(); // 删除成功后刷新页面
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                })
                            </script>

                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}